<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="Top_tilte">
				连连支付密码找回
			</view>
			<view class="List_entrance">
				<view class="List_item"  v-for="(item,index) in InputList" :key='index' :class=" index != 4 ? 'Bottom_boder' : ''" >
					<view style="width: 200rpx;">
						{{item.title}}
					</view>
					<view class="input" v-if="index == 0">
						<input type="number" v-model="item.value" v-if="index == 0"  @blur="check(item.value)"  :placeholder="item.placeholder" />
					</view>
					<view class="input" v-if='index == 1'>
						<!-- <span>{{item.value}}</span> -->
						<input type="text" v-model="item.value" disabled   />
					</view>
					<view class="inputYzm" v-if='index == 2'>
						<input type="number" maxlength="6" v-model="item.value"   :placeholder="item.placeholder" />
						<view class="yzm" @click="getCode" v-if="popupshow">获取</view>
						<view class="yzm" v-else>{{count}}秒后可重试</view>
					</view>
					<view class="c-password-input-box" v-if="index == 3">
						<view>
							<PwdControl style='' />
						</view>
					</view>
				</view>
				
			</view>
			<view class="Submit" @tap.stop.prevent='Submit'>
				确定修改
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	import verify from '../../../utils/verify';
		import PwdControl from '@/components/PwdControl/index.vue'
	export default {
		components: {
			PwdControl
		},
		data() {
			return {
				InputList: [
					{
						title:'请输入银行卡号',
						value:'',
						placeholder:'请输入银行卡号'
					},
					{
						title:'手机号码',
						value:'输入银行卡号后自动获取',
						placeholder:''
					},
					{
						title:'短信验证',
						value:'',
						placeholder:'请输入短信验证'
					},
					{
						title:'支付密码',
						value:'',
						placeholder:'请输入新密码'
					}
				],
				token:'',
				password:'',
				popupshow: true,
				count: 0,
				timer:false,
				accp_txno:'',
				LLtoken:'',
				txn_seqno:'',
				isBTN:false
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.token = uni.getStorageSync('token')
		},
		onShow(){
			this.$nextTick(() => {
				window.getRandom()
			})
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		mounted() {
			
		
		},
		methods:{
			//获取验证码倒计时
			getCode() {

				console.log(this.InputList[1].value == '' || this.InputList[1].value == null)
				if(this.InputList[0].value == '' || this.InputList[0].value == null){
					app.showToast('请输入银行号');
				}else if(this.InputList[1].value == '' || this.InputList[1].value == null){
					app.showToast('请填写正确的银行号码');
				}else{
					this.getAdd()
					
				}
				
			},
			//输入银行卡号
			check(e) {
				console.log(this.InputList)
				console.log(e)
				let _this = this
				app._post_form('user/getBinBankPhone', {
					card_on: e
				}, function(result) {
					if (1 == result.code) {
						_this.InputList[1].value = result.data.linked_phone
						console.log(_this.InputList[1].value)
						_this.$forceUpdate()
					}
				}, null, function() {
					// 解除按钮禁用
					// _this.disabled = false;
				});
			},
			//点击添加
			Submit(){
				console.log(window.pwdcontrol)
				this.password = window.pwdcontrol
				if(this.InputList[2].value == '' || this.InputList[2].value == null){
					app.showToast('请填写验证码');
				}else{
					let _this = this
					
					app._post_form('user/findPasswordVerify', {
						password:_this.password,
						random_key:window.random.random_key,
						ll_token:_this.LLtoken,
						verify_code:_this.InputList[2].value
					}, function(result) {
						if (1 == result.code) {
							app.showToast('修改成功');
							setTimeout(()=>{
								uni.navigateTo({
									url: '../index'
								});
								// location.href('http://app.liangcang.online/h5/')
							},1500)
							
						}
					}, null, function() {
						// 解除按钮禁用
						app.showError(result.msg);
						// random_key:random.random_key
					});
				}
				
			},
			//发送验证码
			getAdd(){
				let _this = this
				app._post_form('user/findPasswordApply', {
					linked_acctno:this.InputList[0].value,
					linked_phone:this.InputList[1].value
				}, function(result) {
					if (1 == result.code) {
						_this.LLtoken = result.data.token
						
						const TIME_COUNT = 60;
						if (!_this.timer) {
							_this.count = TIME_COUNT;
							_this.popupshow = false;
							_this.timer = setInterval(() => {
								if (_this.count > 0 && _this.count <= TIME_COUNT) {
									_this.count--;
								} else {
									_this.popupshow = true;
									clearInterval(_this.timer);
									_this.timer = null;
								}
							}, 1000)
						}
						
						app.showError('发送验证码成功');
					}
				}, null, function() {
					// 解除按钮禁用
					// _this.popupshow = true
					app.showError(result.msg);
				});
			},
			// 发送验证码前校验手机号
			getYZM() {
				console.log(this.InputList[4].value);
				if(this.InputList[4].value.length == 6){
					this.isBTN = true
				}else{
					this.isBTN = false
				}
			},
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
	}
	.Bottom_boder{
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	.Top_tilte {
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		text-align: center;
		color: rgba(0, 0, 0, 0.9);
		font-size: 30rpx;
		font-family: 'dy-iconfont';
		font-weight: bold;
		line-height: 80rpx;
	}

	.List_entrance {
		margin: 0 30rpx;
		margin-top: 50rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(0, 0, 0, 0.02);
		padding: 0 30rpx;
	
		.List_item {
			height: 100rpx;
			background-color: #FFF;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.9);
			input{
				font-size: 28rpx;
			}
			.input {
				input{
					width: 400rpx;
					
				}
			}
			.inputYzm{
				height: 48rpx;
				display: flex;
				align-items: center;
				input{
					width: 224rpx;
				}
				.yzm{
					font-size: 24rpx
				}
			}
		}
	}
	.Submit{
		color: #FFF;
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(270deg,#1a1a1a,#666);
		position: fixed;
		bottom: 114rpx;
		border-radius: 10rpx;
	}
	.Submit1{
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #999;
		position: fixed;
		bottom: 114rpx;
		border-radius: 10rpx;
	}
</style>
